<template>
  <view class="tabbar" >
    <view class="tabbar-wrapper" >
      <view class="tabbar-item" v-for="(item, index) in tabList" :key="index" @click="handleChange(item, index)">
        <!-- <image class="tabbar-icon" :src="activeIndex == index ? item.selectedIconPath : item.iconPath" /> -->
        <image class="tabbar-icon" :src="item.selectedIconPath" v-show="activeIndex == index" />
        <image class="tabbar-icon" :src="item.iconPath" v-show="activeIndex !== index" />
        <text class="tabbar-title" :class="{ active: activeIndex == index }">{{ item.text }}</text>
      </view>
    </view>
  </view>
<!--  <comCodePopup @on-close="isCodePopup = false" ref="CodePopupRef" />-->
</template>
<script setup>
import { computed, onMounted, ref, defineProps } from 'vue';
// import comCodePopup from '@/components/comCodePopup.vue';
import withdraw_all from  "@/static/images/tabbar/withdraw_all.png"
import withdraw_all_cur from  "@/static/images/tabbar/withdraw_all_cur.png"

import withdraw_mine from  "@/static/images/tabbar/withdraw_mine.png"
import withdraw_mine_cur from  "@/static/images/tabbar/withdraw_mine_cur.png"



const props = defineProps({
  type: {
    type: Number,
    default: 1
  },
  activeIndex: {
    type: Number,
    default: 0
  }
})
const emits = defineEmits(['change']);
// const userStore = useUserStore();
const isCodePopup = ref(false); // 是否显示二维码
const CodePopupRef = ref();

const tabList = ref([
  {
    "pagePath": "/subpkgs/mine/withdraw/index",
    "iconPath": withdraw_all,
    "selectedIconPath": withdraw_all_cur,
    "text": "返现排行",
    "type" : "page"
  },
  {
    "pagePath": "/subpkgs/mine/withdraw/mine",
    "iconPath": withdraw_mine,
    "selectedIconPath": withdraw_mine_cur,
    "text": "我的申请记录",
    "type" : "page"
  }
]);
onMounted(() => {
  // userStore.getSystemInfo();
});
const currentRoute = computed(() => {
  // eslint-disable-next-line no-undef
  const pages = getCurrentPages();
  const page = pages[pages.length - 1];
  return page.route;
});
const safeBottom = computed(() => {
  const res = uni.getSystemInfoSync();
  return res.safeAreaInsets.bottom || 10;
});

const activeIndex = computed(() => {
  if (props.activeIndex) {
    return props.activeIndex;
  }
  return getRouteActiveIndex(currentRoute.value);
});
function getRouteActiveIndex(route) {
  const index = tabList.value.findIndex((item) => {
    return item.pagePath && item.pagePath.indexOf(route) > -1;
  });
  return index;
}
function handleChange(item, index) {
  if(item.type === 'page'){
    uni.redirectTo({
      url: item.pagePath
    });
  } else {
    uni.switchTab({
      url: item.pagePath
    });
  }

}
</script>
<style lang="scss" scoped>
.tabbar {
  width: 100vw;
  min-height: 120rpx;
  box-sizing: content-box;

  padding-bottom: var(--safe-area-inset-bottom);
  .tabbar-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 120rpx;
    box-sizing: content-box;
    padding-bottom: var(--safe-area-inset-bottom);
    display: flex;
    align-items: center;
    z-index: 20;
    background: #fff;
    box-shadow: 0px -2px 12px 0px rgba(221, 221, 221, 0.4214);
  }
  &-wrapper {
    display: flex;
    align-items: center;
  }
  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
  }
  &-icon {
    width: 42rpx;
    height: 42rpx;
  }
  &-title {
    margin-top: 10rpx;
    font-family: PingFangSC-Regular, PingFangSC-Regular;
    font-weight: 400;
    font-size: 22rpx;
    color: #999999;
    line-height: 30rpx;
    font-style: normal;
    text-transform: none;
    &.active {
      color: #3662EC;
    }
  }
}
</style>
